<template>
	<view>
		<view class="box">
			<!-- 搜索框 -->
			<view class="topBox p30">
				<u-search shape="square" placeholder="搜索" v-model="inputValue" clearabled :show-action="false"
					@search="clearList" @clickIcon="clearList" bgColor="#fff">
				</u-search>
			</view>
			<!-- 列表 -->
			<view class="box_list">
				<view class="box_list_item" v-for="(item, index) in list" :key="index">
					<view class="cqname">
						<text></text>
						场区：{{ item.areaName }}
					</view>
					<view class="flex-cb">
						<view class="left">
							<view>闸机名称：{{ item.name }}</view>
							<view>闸机ID：{{ item.code }}</view>
						</view>
					</view>
					<view class="right flex-c">
						<text v-if="item.functors[3]==1" class="huifu" @click="czbtn(item, 4, 4)">恢复</text>
						<text v-if="item.functors[1]==1" class="huifu" @click="czbtn(item, 2, 1)">常开</text>
						<text v-if="item.functors[2]==1" class="huifu" @click="czbtn(item, 3, 2)">常关</text>
						<text v-if="item.functors[4]==1" class="huifu" @click="czbtn(item, 0, 1)">开门</text>
					</view>
				</view>
			</view>
			<u-loadmore v-if="!is && list.length >= 10" status="nomore" line />
			<view class="no-list" v-if="!list || list.length == 0">
				<image src="@/static/images/default_empty.png"></image>
				<view>暂无数据</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				inputValue: '',
				page: 0, //页码
				is: true, //控制是否还能切换下一页
				list: [],
				idIndex: 1
			};
		},
		onLoad() {
			this.getList();
		},
		methods: {
			czbtn(item, type, flagb) {
				let deskId = item.code
				let flag = type
				if (item.manufacturerId == '1') {
					this.$app.ajax({
						data: {
							param: {
								deskId,
								flag: flagb,
							}
						},
						api: this.$api.deviceController()
					}).then(res => {
						if (res.errorCode === '000000') {
							uni.showToast({
								title: '切换成功',
								icon: 'none',
								duration: 300
							})
							setTimeout(() => {
								this.clearList()
							}, 300);
						} else {
							uni.showToast({
								title: '切换失败',
								icon: 'none',
								duration: 300
							})
						}
					})
				} else {
					this.$app.ajax({
						data: {
							param: {
								id: deskId,
								type: flag,
								manufacturerId: item.manufacturerId,
							}
						},
						api: this.$api.deviceControllerb()
					}).then(res => {
						if (res.errorCode === '000000') {
							uni.showToast({
								title: '切换成功',
								icon: 'none',
								duration: 300
							})
							setTimeout(() => {
								this.clearList()
							}, 300);
						} else {
							uni.showToast({
								title: '切换失败',
								icon: 'none',
								duration: 300
							})
						}
					})
				}
			},
			clearList() {
				this.is = true;
				this.page = 0;
				this.list = [];
				this.getList();
			},
			// 列表
			getList() {
				if (!this.is) return
				this.page = this.page + 1
				this.$app.ajax({
					data: {
						pagination: {
							page: this.page,
							rows: 10
						},
						param: {
							venueId: uni.getStorageSync('GYMID'),
							userId: uni.getStorageSync('userId'),
							name: this.inputValue
						}
					},
					api: this.$api.deviceList()
				}).then(res => {
					if (res.errorCode != '000000') return
					if (res.recordList.length < 10 || !res.recordList) {
						this.is = false
					}
					this.totalCount = res.totalCount;
					let arr = res.recordList
					let arrs = []
					if (arr) {
						arrs = this.list.concat(arr)
					} else {
						arrs = []
					}
					this.list = arrs
				})
			},
			onReachBottom() {
				this.getList();
			},
		}
	};
</script>

<style>
	page {
		background: #F7F7F7;
	}
</style>
<style lang="scss" scoped>
	.box_list {
		padding: 0 30rpx 20rpx;
		box-sizing: border-box;
	}

	.box_list_item {
		padding: 30rpx;
		box-sizing: border-box;
		margin-bottom: 24rpx;
		background: #ffffff;
		border-radius: 8rpx;
	}

	.cqname {
		color: #222222;
		font-size: 30rpx;
		line-height: 1.5;
		font-weight: bolder;
		padding-bottom: 10rpx;
		margin-bottom: 10rpx;
		position: relative;
	}

	.cqname text {
		width: 10rpx;
		position: absolute;
		top: 9rpx;
		left: -30rpx;
		height: 28rpx;
		background: #4167c1;
		display: inline-block;
	}

	.left view {
		color: #666666;
		font-size: 26rpx;
		line-height: 1.5;
	}

	.left view:first-of-type {
		margin-bottom: 10rpx;
	}

	.right {
		justify-content: flex-end;
	}

	/* .right text{
  font-size: 26rpx;
  margin-left: 20rpx;
}
.right text:first-of-type{
  margin-left: 0;
} */
	.switch {
		background: #dd5040;
		width: 120rpx;
		height: 50rpx;
		margin-left: 30rpx;
		box-sizing: content-box;
		border-radius: 25rpx;
		border: 1px solid #dd5040;
		position: relative;
	}

	.switch view {
		position: absolute;
		top: 0;
		left: 0;
		width: 50rpx;
		height: 50rpx;
		border-radius: 50%;
		background: #fff;
		box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.4);
		transition: all 0.35s cubic-bezier(0.45, 1, 0.4, 1);
	}

	.switch_checked::before {
		transform: scale(0);
	}

	.switch_checked {
		background-color: #4167c1;
		border: 1px solid #4167c1;
	}

	.switch_checked view {
		left: 100%;
		transform: translateX(-100%);
	}

	.switch text {
		color: #fff;
		width: 120rpx;
		top: 0;
		left: 0;
		position: absolute;
		text-align: right;
		line-height: 50rpx;
		font-size: 24rpx;
		padding-right: 10rpx;
		box-sizing: border-box;
	}

	.switch_checked text {
		text-align: left;
		padding-left: 10rpx;
	}

	.huifu {
		border: 1px solid #4167c1;
		width: 120rpx;
		line-height: 50rpx;
		margin-left: 20rpx;
		height: 50rpx;
		text-align: center;
		box-sizing: content-box;
		border-radius: 25rpx;
		color: #4167c1;
	}
</style>